<template>
  <div class="app-container">
    <el-row>
      <el-descriptions title="用户基本信息" direction="vertical" :column="4" border>
        <el-descriptions-item label="用户名">{{ user.username }}</el-descriptions-item>
        <el-descriptions-item label="角色列表">
          <template v-if="username === 'admin'">
            <el-tag v-for="role in user.roles" :key="role" class="margin-left margin-top" size="small">{{ role }}</el-tag>
          </template>
          <template v-else>
            <el-tag v-for="role in user.roles" :key="role" closable class="margin-left margin-top" size="small" @close="delRole(role)">{{ role }}</el-tag>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="组织列表">
          <template v-if="username === 'admin'">
            <el-tag v-for="group in user.groups" :key="group" class="margin-left margin-top" size="small">{{ group }}</el-tag>
          </template>
          <template v-else>
            <el-tag v-for="group in user.groups" :key="group" closable class="margin-left margin-top" size="small" @click="delGroup(group)">{{ group }}</el-tag>
          </template>
        </el-descriptions-item>
      </el-descriptions>
    </el-row>

    <!-- 用户权限访问信息 -->
    <el-row class="">
      <el-col :span="11">
        <div class="margin-bottom margin-top"><b>可访问用户列表</b></div>
        <el-table
          :data="accessUsers"
          size="mini"
          border
          stripe
          height="300"
          highlight-current-row
        >
          <el-table-column type="index" width="55" />
          <el-table-column
            prop="username"
            label="用户名称"
            sortable
          />
        </el-table>
      </el-col>
      <el-col :span="11">
        <div class="margin-bottom margin-top"><b>可访问角色列表</b></div>
        <el-table
          :data="accessRoles"
          size="mini"
          border
          stripe
          height="300"
          highlight-current-row
        >
          <el-table-column type="index" width="55" />
          <el-table-column
            prop="toolRole.rolename"
            label="角色名称"
            sortable
          />
        </el-table>
      </el-col>
    </el-row>

    <el-row class="margin-top">
      <el-col :span="11">
        <div class="margin-bottom margin-top"><b>可访问组织</b></div>
        <div style="height: 300px;overflow-y: scroll">
          <el-tree ref="accessGroupTree" :data="accessGroups" node-key="path" :default-expanded-keys="['/']" :props="{label: 'path'}" />
        </div>
      </el-col>
      <el-col class="margin-left" :span="11">
        <div class="margin-bottom margin-top"><b>可访问资源</b></div>
        <div style="height: 300px;overflow-y: scroll">
          <el-tree ref="accessResourceTree" :data="accessResources" node-key="id" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import security from '@/api/security'

export default {
  name: 'user_detail',
  data() {
    return {
      username: null,
      accessGroups: [],
      accessRoles: [],
      accessUsers: [],
      accessResources: [],
      user: { toolUser: {}},
      userExtend: {
        grantRoles: [],
        grantGroups: []
      }
    }
  },
  mounted() {
    // 获取请求参数: 用户名
    this.username = this.$route.query.username

    // 请求用户信息
    security.queryUser(this.username).then(res => {
      this.user = res.data
    })

    this.reloadUserAccess()
  },
  methods: {
    delRole(tag) {
      this.user.roles.splice(this.user.roles.indexOf(tag), 1)
      security.userGrantRoles(this.username, this.user.roles.join(',')).then(res => {
        this.reloadUserAccess()
      })
    },
    delGroup(tag) {
      this.user.groups.splice(this.user.groups.indexOf(tag), 1)
      security.userGrantGroups(this.username, this.user.groups.join(',')).then(res => {
        this.reloadUserAccess()
      })
    },
    reloadUserAccess() {
      // 查询用户可以访问的角色
      security.queryUserAccessRoles(this.username).then(res => {
        this.accessRoles = res.data
      })
      // 查询用户可以访问的组织
      security.queryUserAccessGroups(this.username).then(res => {
        this.accessGroups = [res.data]
      })
      // 查询可访问用户列表
      security.queryUserAccessUsers(this.username).then(res => {
        this.accessUsers = res.data
      })
      // 查询用户可访问资源
      security.queryUserAccessResources(this.username).then(res => {
        this.accessResources = res.data
      })
    }
  }
}
</script>


